<template>
  <div class="container add">
    <alert v-if="alert" :messages="alert"/>
    <h1 class="page-header">添加用户</h1>
      <form @submit.prevent="addCustomer">
         <div class="well">
           <h3>用户信息</h3>
           <div class="form-group">
           <label>姓名</label>
           <input type="text" class="form-control" placeholder="name" v-model="customer.name"/>
         </div>
           <div class="form-group">
             <label>电话</label>
             <input type="number" class="form-control" placeholder="phone" v-model="customer.phone"/>
           </div>
           <div class="form-group">
             <label>邮箱</label>
             <input type="text" class="form-control" placeholder="email" v-model="customer.email"/>
           </div>
           <div class="form-group">
             <label>学历</label>
             <input type="text" class="form-control" placeholder="education" v-model="customer.education"/>
           </div>
           <div class="form-group">
             <label>毕业学院</label>
             <input type="text" class="form-control" placeholder="graduationschool" v-model="customer.graduationschool"/>
           </div>
           <div class="form-group">
             <label>职业</label>
             <input type="text" class="form-control" placeholder="profession" v-model="customer.profession"/>
           </div>
           <div class="form-group">
             <label>个人简介</label>
             <textarea class="form-control" rows="10" v-model="customer.profile"></textarea>
           </div>
           <button type="submit" class="btn btn-primary">添加</button>
         </div>
      </form>
  </div>
</template>

<script>
import Alert from './home/components/Alert'
export default {
  name: 'Add',
  components: {
    Alert
  },
  data () {
    return {
      customer: {},
      alert: ''
    }
  },
  methods: {
    addCustomer (e) {
      console.log(123)
      if (!(this.customer.name && this.customer.phone && this.customer.email)) {
        this.alert = '请添加对应的信息'
      } else {
        let newCustomer = {
          name: this.customer.name,
          phone: this.customer.phone,
          email: this.customer.email,
          education: this.customer.education,
          graduationschool: this.customer.graduationschool,
          profession: this.customer.profession,
          profile: this.customer.profile
        }
        this.axios.post('/api/users', newCustomer)
          .then((res) => {
            console.log(res)
            this.$router.push({path: '/home', query: {alert: '用户信息添加成功'}})
            this.customer.name = ''
            this.customer.phone = ''
            this.customer.email = ''
            this.customer.education = ''
            this.customer.graduationschool = ''
            this.customer.profession = ''
            this.customer.profile = ''
          })
      }
      // e.preventDefault() // 阻止默认事件，不添加无法跳转,或者这样写：@submit.prevent
    }
  }
}
</script>

<style lang="stylus" scoped>
  label
    font-size 18px
    font-weight 500
  .page-header
    border none
</style>
